<template>
  <div class="visual-box">
    <!-- 充值金额 -->
    <div class="data-box">
      <h3>业绩金额</h3>
      <ul>
        <li>
          <h4>今日业绩</h4>
          <div>
            <div class="orderActual">
              <p>{{ todayPerfor.orderAmount | sumFilters }} <i>(订单)</i></p>
              <p>{{ todayPerfor.orderVoucher | sumFilters }} <i>(实际)</i></p>
            </div>
            <span>{{ todayPerfor.amount | sumFilters }}</span>
          </div>
        </li>
        <li>
          <h4>本周业绩</h4>
          <div>
            <div class="orderActual">
              <p>{{ weekPerfor.orderAmount | sumFilters }} <i>(订单)</i></p>
              <p>{{ weekPerfor.orderVoucher | sumFilters }} <i>(实际)</i></p>
            </div>
            <span>{{ weekPerfor.amount | sumFilters }}</span>
          </div>
        </li>
        <li>
          <h4>本月业绩</h4>
          <div>
            <div class="orderActual">
              <p>{{ monthPerfor.orderAmount | sumFilters }} <i>(订单)</i></p>
              <p>{{ monthPerfor.orderVoucher | sumFilters }} <i>(实际)</i></p>
            </div>
            <span>{{ monthPerfor.amount | sumFilters }}</span>
          </div>
        </li>
        <li>
          <h4>累计业绩</h4>
          <div>
            <div class="orderActual">
              <p>{{ totalPerfor.orderAmount | sumFilters }} <i>(订单)</i></p>
              <p>{{ totalPerfor.orderVoucher | sumFilters }} <i>(实际)</i></p>
            </div>
            <span>{{ totalPerfor.amount | sumFilters }}</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="chart-box">
      <div id="chartPerfor" style="width:100%;height:300px;"></div>
    </div>

    <!-- 成交单量 -->
    <div class="data-box">
      <h3>成交单量</h3>
      <ul>
        <li>
          <h4>今日成交（单）</h4>
          <div>
            <p>{{ todayOrderNum }}</p>
          </div>
        </li>
        <li>
          <h4>本周成交（单）</h4>
          <div>
            <p>{{ weekOrderNum }}</p>
          </div>
        </li>
        <li>
          <h4>本月成交（单）</h4>
          <div>
            <p>{{ monthOrderNum }}</p>
          </div>
        </li>
        <li>
          <h4>累计成交（单）</h4>
          <div>
            <p>{{ yearOrderNum }}</p>
          </div>
        </li>
      </ul>
    </div>
    <div class="chart-box">
      <div id="closingDeal" style="width:100%;height:300px;"></div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import {
  getCmBrokerageSelectOrderByEchartApi,
  getCmBrokerageSelectCountByEchartApi
} from "@/wss/newApi_3-24/financial/cmBrokerage.js";
import { transferTime } from "@/wss/utils/wss.js";
export default {
  name: "Visual",
  props: {
    selectItem: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      //今日业绩
      todayPerfor: {
        amount: 0,
        orderAmount: 0,
        orderVoucher: 0
      },
      //本周业绩
      weekPerfor: {
        amount: 0,
        orderAmount: 0,
        orderVoucher: 0
      },
      //本月业绩
      monthPerfor: {
        amount: 0,
        orderAmount: 0,
        orderVoucher: 0
      },
      //累计业绩
      totalPerfor: {
        amount: 0,
        orderAmount: 0,
        orderVoucher: 0
      },

      todayOrderNum: 0, // 今日成交
      weekOrderNum: 0, // 本周成交
      monthOrderNum: 0, // 本月成交
      yearOrderNum: 0, // 累计成交

      // 商务业绩x轴
      dataPerforX: [],
      // 我的抽成
      commission: [],
      // 商务业绩
      performance: [],

      // 成交单量x轴
      closingDealX: [],
      // 成交单量
      closingDealList: []
    };
  },
  mounted() {},
  watch: {
    selectItem(newValue, oldValue) {
      if (this.selectItem.userId) {
        this.getTodayPerfor(); // 获取今日的业绩数据
        this.getWeekPerfor(); // 获取本周业绩数据
        this.getMonthPerfor(); // 获取本月业绩数据
        this.getYearPerfor(); // 获取今年业绩数据
        this.getPerforDate(); // 获取图表业绩的数据

        this.getTodayTurnover(); // 获取今日的成交单量
        this.getWeekTurnover(); // 获取本周的成交单量
        this.getMonthTurnover(); // 获取本月的成交单量
        this.getYearTurnover(); // 获取今年的成交单量
        this.getClinchDate(); // 获取成交单量的数据
      }
    }
  },
  methods: {
    // 商务的业绩 --------------------------------------------------------
    // 获取今日的业绩数据
    async getTodayPerfor() {
      let today = new Date();
      let start = transferTime(today);
      let arr = await this.getCmBrokerageSelectOrderByEchart(start, start);
      if (arr.length) {
        // 有获取到就赋值
        this.todayPerfor = arr[0];
      } else {
        this.todayPerfor = {
          amount: 0,
          orderAmount: 0,
          orderVoucher: 0
        };
      }
    },

    // 获取本周业绩数据
    async getWeekPerfor() {
      let start = this.weekFirt(); //第一天
      let end = this.weekLast(); //最后一天
      let arr = await this.getCmBrokerageSelectOrderByEchart(start, end);
      if (arr.length) {
        // 有获取到就赋值
        arr.forEach(item => {
          this.weekPerfor.amount = this.weekPerfor.amount + Number(item.amount);
          this.weekPerfor.orderAmount =
            this.weekPerfor.orderAmount + Number(item.orderAmount);
          this.weekPerfor.orderVoucher =
            this.weekPerfor.orderVoucher + Number(item.orderVoucher);
        });
      } else {
        this.weekPerfor = {
          amount: 0,
          orderAmount: 0,
          orderVoucher: 0
        };
      }
    },
    // 获取本月业绩数据
    async getMonthPerfor() {
      let start = this.monthFirst(); //第一天
      let end = this.monthLast(); //最后一天
      let arr = await this.getCmBrokerageSelectOrderByEchart(start, end);
      if (arr.length) {
        // 有获取到就赋值
        arr.forEach(item => {
          this.monthPerfor.amount =
            this.monthPerfor.amount + Number(item.amount);
          this.monthPerfor.orderAmount =
            this.monthPerfor.orderAmount + Number(item.orderAmount);
          this.monthPerfor.orderVoucher =
            this.monthPerfor.orderVoucher + Number(item.orderVoucher);
        });
      } else {
        this.monthPerfor = {
          amount: 0,
          orderAmount: 0,
          orderVoucher: 0
        };
      }
    },

    // 获取今年业绩数据
    async getYearPerfor() {
      // let start = this.yearFirst() //第一天
      let createTime = this.selectItem.createTime.split(" ")[0]; //创建时间
      let end = this.yearLast(); //最后一天
      let arr = await this.getCmBrokerageSelectOrderByEchart(createTime, end);
      if (arr.length) {
        // 有获取到就赋值
        arr.forEach(item => {
          this.totalPerfor.amount =
            this.totalPerfor.amount + Number(item.amount);
          this.totalPerfor.orderAmount =
            this.totalPerfor.orderAmount + Number(item.orderAmount);
          this.totalPerfor.orderVoucher =
            this.totalPerfor.orderVoucher + Number(item.orderVoucher);
        });
      } else {
        this.totalPerfor = {
          amount: 0,
          orderAmount: 0,
          orderVoucher: 0
        };
      }
    },

    // 获取当前商务的业绩数据
    async getCmBrokerageSelectOrderByEchart(start, end) {
      let params = {
        userid: this.selectItem.userId,
        userType: "1", //1商务 2渠道
        start: start,
        end: end,
        isDay: 1
      };
      let result = await getCmBrokerageSelectOrderByEchartApi(params);
      if (result.code == 200) {
        if (result.data) {
          return result.data;
        }
      }
    },

    // 获取图表业绩的数据
    async getPerforDate() {
      //获取前15天的每一天日期 dataPerforX
      this.dataPerforX = [];
      for (let i = -14; i <= 0; i++) {
        // 转成 220705
        let day = this.getFrontDay(i).split("-");
        day[0] = day[0].substring(2, 4);
        this.dataPerforX.push(day.join(""));
      }

      // 获取前15天的数据
      let start = this.getFrontDay(-14); //包含今天所以传-14
      let today = new Date();
      let end = transferTime(today);
      let arr = await this.getCmBrokerageSelectOrderByEchart(start, end);

      // 把获取过来的数据 日期转成 220705
      arr.forEach(item => {
        let t = item.createTime.split(" ")[0];
        let day = t.split("-");
        day[0] = day[0].substring(2, 4);
        item.day = day.join("");
      });
      // 根据day日期排序
      let newArr = arr.sort((a, b) => Number(a.day) - Number(b.day));

      // 循环赋值给 commission我的抽成 和 performance商务业绩
      this.commission = []; //先清除我的抽成
      this.performance = []; //先清除商务业绩
      this.dataPerforX.forEach((per, i) => {
        let obj = newArr.find(item => {
          return per == item.day;
        });
        if (obj) {
          // 日期对上了就赋值抽成和业绩
          this.performance[i] = Number(obj.orderVoucher);
          this.commission[i] = Number(obj.amount);
        } else {
          // 日期没有对上了就不赋值
          this.performance[i] = 0;
          this.commission[i] = 0;
        }
      });

      this.chartPerfor(); // 渲染商务业绩图表
    },
    // 商务的业绩 --------------------------------------------------------end

    // 成交单量 --------------------------------------------------------

    // 获取今日的成交单量
    async getTodayTurnover() {
      let today = new Date();
      let start = transferTime(today);
      let arr = await this.getCmBrokerageSelectCountByEchart(start, start);
      if (arr.length) {
        // 有获取到就赋值
        this.todayOrderNum = arr[0].orderNum;
      } else {
        this.todayOrderNum = 0;
      }
    },

    // 获取本周的成交单量
    async getWeekTurnover() {
      let start = this.weekFirt(); //第一天
      let end = this.weekLast(); //最后一天
      let arr = await this.getCmBrokerageSelectCountByEchart(start, end);
      if (arr.length) {
        // 有获取到就赋值
        arr.forEach(item => {
          this.weekOrderNum = this.weekOrderNum + Number(item.orderNum);
        });
      } else {
        this.weekOrderNum = 0;
      }
    },

    // 获取本月的成交单量
    async getMonthTurnover() {
      let start = this.monthFirst(); //第一天
      let end = this.monthLast(); //最后一天
      let arr = await this.getCmBrokerageSelectCountByEchart(start, end);
      if (arr.length) {
        // 有获取到就赋值
        arr.forEach(item => {
          this.monthOrderNum = this.monthOrderNum + Number(item.orderNum);
        });
      } else {
        this.monthOrderNum = 0;
      }
    },

    // 获取今年的成交单量
    async getYearTurnover() {
      // let start = this.yearFirst() //第一天
      let createTime = this.selectItem.createTime.split(" ")[0]; //创建时间
      let end = this.yearLast(); //最后一天
      let arr = await this.getCmBrokerageSelectCountByEchart(createTime, end);
      if (arr.length) {
        // 有获取到就赋值
        arr.forEach(item => {
          this.yearOrderNum = this.yearOrderNum + Number(item.orderNum);
        });
      } else {
        this.yearOrderNum = 0;
      }
    },

    // 获取当前商务的成交单量
    async getCmBrokerageSelectCountByEchart(start, end) {
      let params = {
        userid: this.selectItem.userId,
        userType: "1", //1商务 2渠道
        start: start,
        end: end,
        isDay: 1
      };
      let result = await getCmBrokerageSelectCountByEchartApi(params);
      if (result.code == 200) {
        if (result.data) {
          return result.data;
        }
      }
    },

    // 获取成交单量的数据
    async getClinchDate() {
      //获取前15天的每一天日期 closingDealX
      this.closingDealX = [];
      for (let i = -14; i <= 0; i++) {
        // 转成 220705
        let day = this.getFrontDay(i).split("-");
        day[0] = day[0].substring(2, 4);
        this.closingDealX.push(day.join(""));
      }

      // 获取前15天的数据
      let start = this.getFrontDay(-14); //包含今天所以传-14
      let today = new Date();
      let end = transferTime(today);
      let arr = await this.getCmBrokerageSelectCountByEchart(start, end);

      // 把获取过来的数据 日期转成 220705
      arr.forEach(item => {
        let t = item.createTime.split(" ")[0];
        let day = t.split("-");
        day[0] = day[0].substring(2, 4);
        item.day = day.join("");
      });
      // 根据day日期排序
      let newArr = arr.sort((a, b) => Number(a.day) - Number(b.day));

      // 循环赋值给 closingDealList
      this.closingDealList = [];
      this.closingDealX.forEach((per, i) => {
        let obj = newArr.find(item => {
          return per == item.day;
        });
        if (obj) {
          // 日期对上了就赋值单量
          this.closingDealList[i] = Number(obj.orderNum);
        } else {
          // 日期没有对上了就不赋值
          this.closingDealList[i] = 0;
        }
      });

      this.closingDeal(); // 渲染成交单量图表
    },

    // 成交单量 --------------------------------------------------------end

    // 获取时间的回调----------------------------------------------------

    //本周第一天
    weekFirt() {
      const date = new Date();
      let week = date.getDay(); //星期
      if (week === 0) week = 7;
      let weekFirstDay = new Date(date - (week - 1) * 86400000);
      return transferTime(weekFirstDay);
    },

    // 本周最后一天
    weekLast() {
      const date = new Date();
      let week = date.getDay(); //星期
      if (week === 0) week = 7;
      var weekFirstDay = new Date(date - (week - 1) * 86400000);
      var weekLastDay = new Date((weekFirstDay / 1000 + 6 * 86400) * 1000);
      return transferTime(weekLastDay);
    },

    //获取本月第一天
    monthFirst() {
      let startTime = new Date();
      startTime.setDate(1); //获取本月第一天
      return transferTime(startTime); // transferTime 转成yyyy-mm-dd
    },

    //获取本月最后一天
    monthLast() {
      let date = new Date();
      let endTime = new Date(date.getFullYear(), date.getMonth() + 1, 0);
      return transferTime(endTime); // transferTime 转成yyyy-mm-dd
    },

    //获取今年第一天
    yearFirst() {
      var date = new Date();
      var year = date.getFullYear();
      var firstMonth = year + "-" + "01" + "-" + "01";
      return firstMonth;
    },

    //获取今年最后一天
    yearLast() {
      var lastDay = new Date();
      lastDay.setFullYear(lastDay.getFullYear() + 1);
      lastDay.setDate(0);
      lastDay.setMonth(-1);
      return transferTime(lastDay);
    },

    // 获取前15天的第一天 num=-15 负多少就是前多少天
    getFrontDay(num) {
      var dd = new Date();
      dd.setDate(dd.getDate() + num); //获取p_count天后的日期
      var y = dd.getFullYear();
      var m = dd.getMonth() + 1; //获取当前月份的日期
      if (m < 10) {
        m = "0" + m;
      }
      var d = dd.getDate();
      if (d < 10) {
        d = "0" + d;
      }
      return y + "-" + m + "-" + d;
    },

    // 获取时间的回调---------------------------------------------------- end

    //商务业绩图表
    chartPerfor() {
      const perforCharts = echarts.init(document.getElementById("chartPerfor"));
      perforCharts.setOption({
        //提示
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none"
          },
          backgroundColor: "rgba(0,0,0,0.8)",
          padding: [11, 20],
          formatter: `
                        <div class="tooltip-box">
                            <h3>{b}</h3>
                            <p>
                                <i></i><b>{a1}</b><b>￥{c1}</b>
                            </p>
                            <p>
                                <i></i><b>{a0}</b><b>￥{c0}</b>
                            </p>
                        </div>
                    `
        },
        //图例
        legend: {
          data: ["商务业绩", "我的抽成"],
          left: 0,
          icon: "circle",
          itemWidth: 8, //矩形宽度
          itemHeight: 8 //矩形高度
        },
        //x轴配置
        xAxis: {
          //数据
          data: this.dataPerforX,
          axisLine: {
            //线
            show: false
          },
          axisTick: {
            //刻度
            show: false
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "#909AAA"
            }
          }
        },
        //y轴配置
        yAxis: {
          axisLine: {
            //线
            show: false
          },
          axisTick: {
            //刻度
            show: false
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "#909AAA"
            }
          },
          splitLine: {
            //网格线
            lineStyle: {
              type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              width: 1,
              color: "#E9E9E9"
            },
            show: true //隐藏或显示
          }
        },
        //系列的设置：图表的类型和数据
        series: [
          {
            name: "我的抽成",
            type: "bar", //图标类型 bar：柱状图，line：折线图
            data: this.commission, //数据
            stack: "yj",
            color: "#E6772D", //颜色
            barWidth: 6, //柱子宽度
            itemStyle: {
              normal: {
                //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                barBorderRadius: [0, 0, 6, 6]
              }
            }
          },
          {
            name: "商务业绩",
            type: "bar", //图标类型 bar：柱状图，line：折线图
            data: this.performance, //数据
            stack: "yj",
            color: "#39486F", //颜色
            barWidth: 6, //柱子宽度
            itemStyle: {
              normal: {
                //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                barBorderRadius: [6, 6, 0, 0]
              }
            }
          }
        ],
        //图表的间距
        grid: {
          left: 10,
          right: 10,
          bottom: 30,
          top: 50,
          containLabel: true
        }
      });
    },

    // 成交单量图表
    closingDeal() {
      const closingDealCharts = echarts.init(
        document.getElementById("closingDeal")
      );
      closingDealCharts.setOption({
        //提示
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none"
          },
          backgroundColor: "rgba(0,0,0,0.8)",
          padding: [11, 20],
          formatter: `
                        <div class="tooltip-box closing">
                            <h3>{b}</h3>
                            <p>
                                <i></i><b>{a}</b><b>{c}</b>
                            </p>
                        </div>
                    `
        },
        //图例
        legend: {
          data: ["成交单量"],
          left: 0,
          icon: "circle",
          itemWidth: 8, //矩形宽度
          itemHeight: 8 //矩形高度
        },
        //x轴配置
        xAxis: {
          //数据
          data: this.closingDealX,
          axisLine: {
            //线
            show: false
          },
          axisTick: {
            //刻度
            show: false
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "#909AAA"
            }
          }
        },
        //y轴配置
        yAxis: {
          axisLine: {
            //线
            show: false
          },
          axisTick: {
            //刻度
            show: false
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "#909AAA"
            }
          },
          splitLine: {
            //网格线
            lineStyle: {
              type: "dashed", //设置网格线类型 dotted：虚线   solid:实线
              width: 1,
              color: "#E9E9E9"
            },
            show: true //隐藏或显示
          }
        },
        //系列的设置：图表的类型和数据
        series: [
          {
            name: "成交单量",
            type: "line", //图标类型 bar：柱状图，line：折线图
            data: this.closingDealList, //数据
            color: "#E6772D", //颜色
            smooth: true, //平滑过渡
            symbol: "none" //取消拐点
          }
        ],
        //图表的间距
        grid: {
          left: 10,
          right: 10,
          bottom: 30,
          top: 50,
          containLabel: true
        }
      });
    }
  }
};
</script>

<style scoped>
h3,
h4,
p,
ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 四块区域 */
.data-box h3 {
  font-size: 16px;
  font-weight: 600;
  color: #2e405e;
  margin: 20px 0;
}

.data-box ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.data-box ul li {
  width: 22%;
  border: 1px solid #e4e4e4;
  padding: 15px;
  border-radius: 4px;
}
.data-box ul li > h4 {
  font-size: 12px;
  font-weight: 400;
  color: #2e405e;
  margin-bottom: 20px;
}
.data-box ul li > div {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
}
.data-box ul li > div p {
  font-size: 18px;
  font-weight: bold;
  line-height: 26px;
  color: #2e405e;
}
.data-box ul li > div p > i {
  font-style: normal;
  font-size: 12px;
  font-weight: 400;
}
.data-box ul li > div > span {
  font-size: 12px;
  font-weight: 400;
  color: #73829c;
  margin-bottom: 6px;
  margin-left: auto;
}

/* 商务业绩图表 */
.chart-box {
  margin: 30px 0;
}
/* 提示框的样式 */
::v-deep .chart-box .tooltip-box p,
::v-deep .chart-box .tooltip-box h3 {
  margin: 0;
  padding: 0;
}
::v-deep .chart-box .tooltip-box h3 {
  font-size: 12px;
  margin-bottom: 10px;
}
::v-deep .chart-box .tooltip-box p {
  display: flex;
  align-items: center;
  line-height: 30px;
}
::v-deep .chart-box .tooltip-box b {
  font-weight: 400;
}
::v-deep .chart-box .tooltip-box p > b:nth-child(2) {
  margin-right: 30px;
}

::v-deep .chart-box .tooltip-box i {
  display: block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background-color: #2e405e;
}
::v-deep .chart-box .tooltip-box p:nth-child(3) > i {
  background-color: #e6772d;
}
::v-deep .chart-box .tooltip-box.closing p > i {
  background-color: #e6772d;
}
</style>
